<template>
  <a-card v-if="show" :bordered="false" size="small">
    <vxe-grid v-bind="gridOptions">
      <template #operate="{ row }">
        <a
          @click="
            ;(editModel = true),
              (selectId = row.id),
              (selectType = row.componentType)
          "
        >
          编辑
        </a>
        <a-divider type="vertical" />
        <a @click="jumpDelete(row.id)">删除</a>
      </template>

      <template #toolbar_buttons>
        <a-button type="primary" @click="addModel = true">
          <template #icon><PlusSquareOutlined /></template>
          新增
        </a-button>
      </template>
      <template #pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        ></vxe-pager>
      </template>
    </vxe-grid>

    <!-- 新增组件 -->
    <vxe-modal v-model="addModel" width="900" show-zoom resize>
      <template #default>
        <a-alert
          message=" 新建组件："
          description="请选择需要创建的组件类型，并填写相应内容。"
          type="info"
          show-icon
        />
        <br />
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card
              @click="changeType('table')"
              hoverable
              style="width: 160px; margin: 0px auto"
              :class="cardValue ==1 ?'cardActive':''"
            >
              <template #cover>
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              </template>
              <a-card-meta>
                <template #title>
                  <div style="text-align: center">表格组件</div>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card
              @click="changeType('echart')"
              hoverable
              style="width: 160px; margin: 0px auto"
              :class="cardValue ==2 ?'cardActive':''"
            >
              <template #cover>
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              </template>
              <a-card-meta>
                <template #title>
                  <div style="text-align: center">图表组件</div>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card
              @click="changeType('list')"
              hoverable
              style="width: 160px; margin: 0px auto"
              :class="cardValue ==3 ?'cardActive':''"
            >
              <template #cover>
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              </template>
              <a-card-meta>
                <template #title>
                  <div style="text-align: center">列表组件</div>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card
              @click="changeType('tagGroup')"
              hoverable
              style="width: 160px; margin: 0px auto"
              :class="cardValue ==4 ?'cardActive':''"
            >
              <template #cover>
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              </template>
              <a-card-meta>
                <template #title>
                  <div style="text-align: center">标签组组件</div>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
        <br />
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :labelCol="{ span: 3 }"
          :wrapperCol="{ span: 19 }"
        >
          <a-form-item
            :wrapperCol="{ span: 19, offset: 3 }"
            name="componentType"
          >
            <a-input
              style="display: none"
              v-model:value="formState.componentType"
            ></a-input>
          </a-form-item>
          <a-form-item name="name" label="组件名称">
            <a-input
              v-model:value="formState.name"
              placeholder="请输入组件名称"
            ></a-input>
          </a-form-item>

          <a-form-item label="备注">
            <a-textarea
              v-model:value="formState.note"
              :rows="4"
              placeholder="请输入备注"
            ></a-textarea>
          </a-form-item>
          <a-form-item :wrapperCol="{ span: 22 }" class="t-right">
            <a-button @click="onSubmit" size="large" type="primary">
              <template #icon>
                <ArrowRightOutlined />
              </template>
              新增
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </vxe-modal>
    <!-- 编辑model -->
    <vxe-modal height="550" v-model="editModel" width="900" show-zoom resize >
      <template #default>
        <!-- table表格配置项 -->
        <tableConfig
          v-if="selectType === 'table'"
          v-model:selectId="selectId"
        ></tableConfig>
        <!-- tagGroup配置项 -->
        <tagGroupConfig
          v-if="selectType === 'tagGroup'"
          v-model:selectId="selectId"
        ></tagGroupConfig>
        <!-- echart配置项 -->
        <echartSetting
          v-if="selectType === 'echart'"
          v-model:selectId="selectId"
        ></echartSetting>
         <!-- list配置项 -->
        <listConfig
          v-if="selectType === 'list'"
          v-model:selectId="selectId"
        ></listConfig>
      </template>
    </vxe-modal>
  </a-card>
</template>
<script>
  import { Gets, Delete, Add } from '@/api/component/api'
  import { PlusSquareOutlined, ArrowRightOutlined } from '@ant-design/icons-vue'
  import tableConfig from './componentConfig/tableConfig'
  import tagGroupConfig from './componentConfig/tagGroupConfig'
  import echartSetting from './componentConfig/echartSetting'
  import listConfig from './componentConfig/listConfig'

  import { reactive, ref, onMounted } from 'vue'
  import { message } from 'ant-design-vue'
  import { basicComponents } from './componentConfig/componentsConfig.js'
  import moment from 'moment'
  export default {
    components: {
      PlusSquareOutlined,
      ArrowRightOutlined,
      tableConfig,
      tagGroupConfig,
      echartSetting,
      listConfig
    },
    data() {
      return {}
    },

    setup() {
      const show = ref(false)
      let cardValue = ref(0) //card点击标识
      const tablePage = reactive({
        total: 0,
        currentPage: 1,
        pageSize: 10,
      })
      const formRef = ref()
      const selectId = ref()
      const selectType = ref()
      const addModel = ref(false)
      const editModel = ref(false)
      const components = basicComponents
      const formState = reactive({
        name: '', //组件 名称
        componentType: '', //组件类型
        note: '', //备注
      })
      const rules = {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        componentType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'blur',
          },
        ],
      }
      const gridOptions = reactive({
        border: true, // 边框
        resizable: true, // 列宽拖动
        loading: false,
        exportConfig: {}, // 导出配置
        printConfig: {}, // 打印配置
        customConfig: {}, // 列设置配置
        toolbarConfig: {
          export: true, // 导出配置
          custom: true, // 列设置
          print: true, // 打印
          zoom: true, //  最大化
          slots: {
            buttons: 'toolbar_buttons',
          },
        },
        data: [],
        columns: [
          { type: 'seq', width: 60 },
          { field: 'name', title: '名称' },
          { field: 'componentType', title: '类型' },
          { field: 'version', title: '数据源' },
          { field: 'creator', title: '创建人' },
          {
            field: 'lastModificationTime',
            title: '修改时间',
            formatter({ cellValue }) {
              return moment(new Date(cellValue)).format('yyyy-MM-DD hh:mm')
            },
          },
          {
            title: '操作',
            width: 120,
            align: 'center',
            slots: { default: 'operate' },
          },
        ],
      })

      const findList = () => {
        gridOptions.loading = true
        const queryData = {
          SkipCount: tablePage.currentPage,
          MaxResultCount: tablePage.pageSize,
        }

        Gets(queryData).then((res) => {
          if (res.isSuccess) {
            console.log(res)
            gridOptions.data = res.content.items
            tablePage.total = res.content.totalCount
            gridOptions.loading = false
          } else {
            console.log('error', res)
          }
        })
      }

      const handlePageChange = ({ currentPage, pageSize }) => {
        tablePage.currentPage = currentPage
        tablePage.pageSize = pageSize
        findList()
      }
      const changeType = (type) => {
        formState.componentType = type
        formState.Json = JSON.stringify(components.find((s) => s.type === type))
        switch(type){
           case 'table':
            cardValue.value = 1
            break
          case 'echart':
            cardValue.value = 2
            break
          case 'list':
            cardValue.value = 3
            break
          case 'tagGroup':
            cardValue.value = 4
            break
          
        }
      }

      const onSubmit = () => {
        formRef.value
          .validate()
          .then(() => {
            Add(formState).then((res) => {
              if (res.isSuccess) {
                message.success('恭喜你，组件添加成功！')
                findList()
                editModel.value = true
                selectId.value = res.content
                selectType.value = formState.componentType
                setTimeout(() => {
                  addModel.value = false
                }, 400)
              } else {
                message.error(res.message)
              }
            })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
      onMounted(() => {
        findList()
        show.value = true
      })
      return {
        show,
        selectId,
        selectType,
        formRef,
        formState,
        tablePage,
        gridOptions,
        addModel,
        editModel,
        handlePageChange,
        changeType,
        onSubmit,
        rules,
        cardValue
      }
    },

    methods: {
      //删除流程
      jumpDelete(id) {
        var that = this
        this.$confirm({
          title: '提示',
          content: '是否删除该数据？',
          onOk: () => {
            Delete({ id: id })
              .then(() => {
                that.$message.success('删除成功！')
                that.getData()
              })
              .catch((err) => {
                console.log(err)
              })
          },
        })
      },
    },
  }
</script>
<style scoped>
.cardActive{
  border:1px solid skyblue;
}
</style>
